<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
	// Load the Visualization API and the piechart package.
	google.load('visualization', '1.0', {'packages':['corechart']});

	// Set a callback to run when the Google Visualization API is loaded.
	google.setOnLoadCallback(drawChart);

	// Callback that creates and populates a data table,
	// instantiates the pie chart, passes in the data and
	// draws it.
	function drawChart() {

		// Create the data table.
		var data = new google.visualization.DataTable();
		data.addColumn('string', 'Category');
		data.addColumn('number', 'Total');
		data.addRows(<?php print $category_trend; ?>);

		// Set chart options
		var options = {
			'title':'Trends of my expense',
			'width':600,
			'height':300};

		// Instantiate and draw our chart, passing in some options.
		var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
		chart.draw(data, options);
	}
</script>

<div class="dashboard-container row">

	<div class="span8">
		<div class="clearfix" id="chart_div"></div>
		<div class="clearfix"><?php dsm($category_trend); ?></div>
	</div>

	<!--This is the start of the modal area-->
	<div class="model-container pull-right span4">
		<!--Modal Popup and button code-->
		<div class="clearfix">
			<a data-toggle="modal" href="#myModal" class="btn">Add new transaction</a>

			<!-- This is the code for the modal popup -->
			<div class="modal hide fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none; ">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
					<h3 id="myModalLabel">Add a new Transaction</h3>
				</div>
				<div class="modal-body clearfix">
					<?php
					$this->load->view('transactions/addtransaction_v');
					?>
				</div>
				<div class="modal-footer">
					<br /><br />
					<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
				</div>
			</div>
		</div>
		<!-- End of the modal popup code -->
		
		<!-- Side bar container -->
		<div class="sidebar-container" ng-app>
			<div class="clearfix">
				<h4>Latest transactions</h4>
				<div class="dashboard-data" ng-controller="dashboard_home">
					<table class="table table-bordered table-striped table-condensed table-hover">
						<tr>
							<th>Desc</th>
							<th>Amt</th>
						</tr>
						<tr ng-repeat="t in last_ten_trans">
							<td>{{t.description}}</td>
							<td>{{t.amount}}</td>
						</tr>
					</table>
				</div>
			</div>
			
			<div class="clearfix">
				<h4>Bill payments this month</h4>
				<div class="dashboard-data" ng-controller="bill_payment">
					<table class="table table-bordered table-striped table-condensed table-hover">
						<tr>
							<th>Date</th>
							<th>Biller</th>
							<th>Amount</th>
						</tr>
						<tr ng-repeat="t in bill_payments">
							<td>{{t.date}}</td>
							<td>{{t.name}}</td>
							<td>Rs {{t.amount}}</td>
						</tr>
						<tr class="info">
							<td colspan="2"><strong>Total</strong></td>
							<td><strong>Rs {{total_amount}}</strong></td>
						</tr>
					</table>
				</div>
			</div>
		</div>
		<!-- Side bar container -->
	</div>

</div>